<template>
    <router-link :to="path">
        <div class="menu-item">{{ title }}</div>
    </router-link>
</template>

<script>
    export default {
        name: 'menu-item',
        props: {
            path: { // 唯一的routerPath
                type: String,
                required: true
            },
            title: { // 标题
                type: String,
                required: true
            }
        },
        data() {
            return {}
        },
        methods: {}
    }
</script>

<style scoped>
    .menu-item {
        padding: 20px;
        color: rgb(153, 153, 153);
        user-select: none
    }

    .menu-item:hover {
        background: rgb(244, 244, 244);
    }
</style>